<template>
  <div>
    <a-drawer
      width="1100"
      :maskClosable="false"
      :visible="detailData.show"
      direction="rtl"
      @close="handleClose">
        <div slot="title">
          <!-- <i class="el-icon-arrow-left"></i> -->
          <span>EC机器人详情</span>
        </div>
      <el-row style="width:1120px;padding-bottom:280px;height:100%;overflow-y:auto">
        <el-col :span="18">
          <el-form
            :model="parames"
            status-icon
            label-position="left"
            ref="parames"
            label-width="94px"
            class="detailForm"
            v-loading="loading"
          >
            <el-row style="padding: 0 40px">
              <a-collapse :defaultActiveKey="activeNames" :bordered="false">
                <a-collapse-panel class="marginB10" header="基本信息" key="1">
                  <el-col :span="12">
                    <el-form-item label="状态:">
                      <span v-if="parames.contactStatus">{{parames.contactStatus.desc}}</span>
                    </el-form-item>
                    <el-form-item label="联系人:">
                      <span>{{parames.contacts}}</span>
                    </el-form-item>
                    <el-form-item label="联系方式:">
                      <span>{{parames.contactNumber}}</span>
                    </el-form-item>
                    <el-form-item label="客户反馈:">
                      <span>{{parames.feedback}}</span>
                    </el-form-item>
                    <el-form-item label="地区:">
                      <span>{{parames.area}}</span>
                    </el-form-item>
                    <el-form-item label="签单时间:">
                      <span>{{parames.signingDate | formatDate}}</span>
                    </el-form-item>
                    <el-form-item label="下次跟进时间:">
                      <span>{{parames.nextFollowDate | formatDate}}</span>
                    </el-form-item>
                    <el-form-item label="录音内容:" v-if="parames.voiceConversionContent">
                      <span>{{parames.voiceConversionContent}}</span>
                    </el-form-item>
                    <el-form-item label="上传录音文件:">
                      <el-upload
                        class="upload-demo"
                        :headers="myHeaders"
                        :action="fileAction"
                        :on-success="handleSucess"
                        :data="fileData"
                        :on-remove="handleRemove"
                        :file-list="file">
                        <el-button icon="el-icon-upload2" type="primary" plain size="mini">上传录音文件</el-button>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </a-collapse-panel>
              </a-collapse>
            </el-row>
          </el-form>
        </el-col>
        <el-col :span="5" style="position: fixed;top:80px;right:-10px;width:240px">
          <div class="form-team-box">
            <div>
              <el-button
                size="small"
                @click="handleEdit"
                icon="el-icon-edit"
                style="width:200px;text-align: left;margin:0 0 10px 0"
              >编辑修改</el-button>
            </div>
            <div>
              <el-button
                size="small"
                @click="handleDelete"
                icon="el-icon-delete"
                style="width:200px;text-align: left;margin:0 0 10px 0"
              >删除</el-button>
            </div>
            <div style="margin-bottom: 20px">
              <el-button
                @click="handleAdd"
                size="small"
                icon="el-icon-refresh"
                style="width:200px;text-align: left;margin:0 0 10px 0"
              >转化为商机</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </a-drawer>
    <createdSjDialog :dialogData="dialogSjData" @checkOpen="checkOpen"></createdSjDialog>
    <createdDialog :dialogData="dialogData" @checkOpen="checkOpen"></createdDialog>
  </div>
</template>

<script>
import createdSjDialog from '../opportunityManage/createdDialog.vue'  //新建商机
import createdDialog from './createdDialog.vue'  //新建ec
export default {
  props: ["detailData"],
  data() {
    return {
      loading: false,
      activeNames: ['1'],
      parames: {},
      fileList: [],
      file: [],
      fileData: {
        robotId: ''
      },
      dialogSjData: {
        id: '',
        type: '',
        title: '',
        show: false
      },
      myHeaders: {authorization: ''},
      fileAction: this.$api.postEcUploadVoiceFile, //附件上传地址
      dialogData: { //新建弹窗
        type: '',
        id: '',
        show: false,
      }
    };
  },
  methods: {
    handleClose() {//关闭弹窗
      this.detailData.show = false;
    },
    handleAdd () { //转化为商机
      this.dialogSjData.type = 'new'
      this.dialogSjData.origin = 'ec'
      this.dialogSjData.contacts = this.parames.contacts
      this.dialogSjData.contactNumber = this.parames.contactNumber
      this.dialogSjData.title = '新建商机'
      this.dialogSjData.show = true
    },
    handleSucess (response,fileList) { //上传附件成功返回url
      this.fileList.push(response.data.url)
      this.$message({
          message: '上传成功',
          type: 'success'
      });
      this.render()
      this.file = []
    },
    handleRemove (file) { //删除附件更新
      this.fileList.forEach((el,index)=>{
        if (el == file.response.data.url) {
          this.fileList.splice(index, 1)
        }
      })
    },
    checkOpen (type) { //重新打开并向上刷新列表数据
      this.detailData.show = true
      if (type == '1') { //是点击了修改保存按钮-需刷新列表数据
        setTimeout(() => {
          this.$emit('checkRender')
        }, 200);
      }
    },
    handleOpen () { //回退打开本弹窗
      this.detailData.show = true;
    },
    render () {
      this.loading = true
      this.$post(this.$api.postEcFind, { //根据id获取详情
        robotId: this.detailData.id
      }).then(response => {
        if (response.data.succeed) {
          this.parames = response.data.data
          setTimeout(() => {
            this.loading = false
          }, 200);
        }
      })
    },
    handleEdit () { //修改-关闭自身弹窗
      this.dialogData.id = this.detailData.id
      this.dialogData.title = '编辑修改'
      this.dialogData.type = 'edit'
      this.dialogData.show = true
      this.handleClose()
    },
    handleDelete () { //删除ec机器人
      this.$post(this.$api.postEcDel, { //根据id获取详情
        robotId: this.detailData.id
      }).then(response => {
        if (response.data.succeed) {
          this.$emit('checkRender')
          this.handleClose()
          setTimeout(() => {
          }, 200);
        }
      })
    }
  },
  components: {
    createdDialog,
    createdSjDialog
  },
  computed: { //计算属性
    changeDialog () {
      return this.detailData.show
    }
  },
  watch: {
    changeDialog: {
      handler (curVal, oldVal) {
        if (curVal) {
          this.myHeaders.authorization = this.$utils.getLocalStorage('usertoken')
          this.fileData.robotId = this.detailData.id
          this.render()
        } else {
          this.file = []
        }
      }
    },
    deep: true
  }
};
</script>

<style scoped>
</style>
